<template>
	<view :style="[boxStyle]">
		<view>
			<!-- 单列 -->
			<view v-if="goodStyleConfig == 0">
				<view class="w-full flex justify-between item bg--w111-fff p-20 rd-16rpx"
					v-for="(item,index) in tempArr" :key="index"
					@tap="goDetail(item)">
					<easy-loadimage
					:image-src="item.image"
					:borderSrc="item.activity_frame.image"
					width="224rpx"
					height="224rpx"
					:borderRadius="imgStyle"></easy-loadimage>
					<view class="flex-1 flex-col justify-between pl-20">
						<view class="w-full fs-28 h-80 lh-40rpx line2"
							v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
						<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
							<BaseTag
								:text="label.label_name"
								:color="label.color"
								:background="label.bg_color"
								:borderColor="label.border_color"
								:circle="label.border_color ? true : false"
								:imgSrc="label.icon"
								v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
						</view>
						<view class="flex-between-center" v-if="onlyShowPrice">
							<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
								:color="priceColor"></baseMoney>
							<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
								<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
									v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_increase fs-26"></text>
									</view>
								</view>
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="flex-y-center mt-4">
								<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
									:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
								<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
									<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
									<text class="px-8 fs-22">¥{{item.vip_price}}</text>
								</view>
							</view>
							<view class="flex justify-between items-end">
								<view class="flex-y-center">
									<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
									<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
								</view>
								<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
									<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
										v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
									<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
										<view class="flex-center cart-btn">
											<text class="iconfont icon-ic_increase fs-26"></text>
										</view>
									</view>
									<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
										<view class="flex-center cart-btn">
											<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
										</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 两列瀑布流 -->
			<view class="wf-page" v-if="goodStyleConfig == 1">
			    <!-- left -->
			    <view class="w-full">
			        <view id="left" v-if="leftList.length">
			            <view v-for="(item,index) in leftList" :key="index" class="wf-item" :style="[wfItemStyle]" @tap="goDetail(item)">
			                <view class='pictrue'>
			                	<easy-loadimage
			                	:image-src="item.image"
			                	:borderSrc="item.activity_frame.image"
			                	width="100%"
			                	height="346rpx"
			                	:borderRadius="imgStyle"></easy-loadimage>
			                </view>
			                <view class="info_box">
			                	<view class="w-full line2 fs-28 text--w111-333 lh-40rpx"
			                		v-if="checkboxInfo.includes(0)" :style="[productStyle]">
									<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
									{{item.store_name}}</view>
			                	<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
			                		<BaseTag
			                			:text="label.label_name"
			                			:color="label.color"
			                			:background="label.bg_color"
			                			:borderColor="label.border_color"
			                			:circle="label.border_color ? true : false"
			                			:imgSrc="label.icon"
			                			v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
			                	</view>
								<view class="flex-between-center mt-20" v-if="onlyShowPrice">
									<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
										:color="priceColor"></baseMoney>
									<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
										<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
											<view class="flex-center cart-btn">
												<text class="iconfont icon-ic_increase fs-26"></text>
											</view>
										</view>
										<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
											<view class="flex-center cart-btn">
												<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
											</view>
										</view>
									</view>
								</view>
								<view v-else>
									<view class="flex-y-center mt-8">
										<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
											:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
										<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
											<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
											<text class="px-8 fs-22">¥{{item.vip_price}}</text>
										</view>
									</view>
									<view class="flex-between-center mt-20">
										<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
										<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
											<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
												<view class="flex-center cart-btn">
													<text class="iconfont icon-ic_increase fs-26"></text>
												</view>
											</view>
											<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
												<view class="flex-center cart-btn">
													<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
												</view>
											</view>
										</view>
									</view>
								</view>
			                </view>
			            </view>
			        </view>
			    </view>
			    <!-- right -->
			    <view class="w-full">
			        <view id="right" v-if="rightList.length">
			            <view v-for="(item,index) in rightList" :key="index"
			                  class="wf-item" :style="[wfItemStyle]" @tap="goDetail(item)">
			                <view class='pictrue'>
			                	<easy-loadimage
			                	:image-src="item.image"
			                	:borderSrc="item.activity_frame.image"
			                	width="100%"
			                	height="346rpx"
			                	:borderRadius="imgStyle"></easy-loadimage>
			                </view>
			                <view class="info_box">
			                	<view class="w-full line2 fs-28 text--w111-333 lh-40rpx"
			                		v-if="checkboxInfo.includes(0)" :style="[productStyle]">
									<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
									{{item.store_name}}</view>
			                	<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
			                		<BaseTag
			                			:text="label.label_name"
			                			:color="label.color"
			                			:background="label.bg_color"
			                			:borderColor="label.border_color"
			                			:circle="label.border_color ? true : false"
			                			:imgSrc="label.icon"
			                			v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
			                	</view>
			                	<view class="flex-between-center mt-20" v-if="onlyShowPrice">
			                		<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
			                			:color="priceColor"></baseMoney>
			                		<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
			                			<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
			                				<view class="flex-center cart-btn">
			                					<text class="iconfont icon-ic_increase fs-26"></text>
			                				</view>
			                			</view>
			                			<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
			                				<view class="flex-center cart-btn">
			                					<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
			                				</view>
			                			</view>
			                		</view>
			                	</view>
			                	<view v-else>
			                		<view class="flex-y-center mt-8">
			                			<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
			                				:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
			                			<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
			                				<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
			                				<text class="px-8 fs-22">¥{{item.vip_price}}</text>
			                			</view>
			                		</view>
			                		<view class="flex-between-center mt-20">
			                			<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
			                			<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
			                				<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
			                					<view class="flex-center cart-btn">
			                						<text class="iconfont icon-ic_increase fs-26"></text>
			                					</view>
			                				</view>
			                				<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
			                					<view class="flex-center cart-btn">
			                						<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
			                					</view>
			                				</view>
			                			</view>
			                		</view>
			                	</view>
			                </view>
			            </view>
			        </view>
			    </view>
			</view>
			<!-- 两列展示(横向) -->
			<view class="pt-32 pr-24 pb-32 pl-24 bg--w111-fff rd-16rpx" v-if="goodStyleConfig == 3">
				<view class="grid-column-2 grid-gap-20rpx">
					<view class="flex" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
						<easy-loadimage
						:image-src="item.image"
						:borderSrc="item.activity_frame.image"
						width="144rpx"
						height="144rpx"
						:borderRadius="imgStyle"></easy-loadimage>
						<view class="flex-1 pl-20">
							<view class="w-full fs-26 h-72 lh-36rpx line2 mb-20"
								v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
							<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
								:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
						</view>
					</view>
				</view>
			</view>
			<!-- 三列 -->
			<view class="pt-32 pr-24 pb-32 pl-24 bg--w111-fff rd-16rpx" v-if="goodStyleConfig == 2">
				<view class="grid-column-3 grid-gap-20rpx">
					<view v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
						<easy-loadimage
						:image-src="item.image"
						:borderSrc="item.activity_frame.image"
						width="100%"
						height="210rpx"
						:borderRadius="imgStyle"></easy-loadimage>
						<view class="w-full fs-28 h-80 lh-40rpx line2 mt-20"
							v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
						<view class="flex-between-center mt-14">
							<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
								:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
							<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_increase fs-26"></text>
									</view>
								</view>
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 大图展示 -->
			<view v-if="goodStyleConfig ==4">
				<view class="w-full item" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
					<easy-loadimage
					:image-src="item.image"
					width="100%"
					height="360rpx"
					:borderRadius="imgStyle"></easy-loadimage>
					<view class="rd-b-24rpx p-24 bg--w111-fff">
						<view class="w-full line1 fs-28 text--w111-333 lh-40rpx mt-22"
							v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
						<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
							<BaseTag
								:text="label.label_name"
								:color="label.color"
								:background="label.bg_color"
								:borderColor="label.border_color"
								:circle="label.border_color ? true : false"
								:imgSrc="label.icon"
								v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
						</view>
						<view class="flex-between-center" v-if="onlyShowPrice">
							<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
								:color="priceColor"></baseMoney>
							<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
								<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
									v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_increase fs-26"></text>
									</view>
								</view>
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="flex-y-center mt-8">
								<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
									:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
								<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8"
									v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
									<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
									<text class="px-8 fs-22">¥{{item.vip_price}}</text>
								</view>
							</view>
							<view class="flex justify-between items-end">
								<view class="flex-y-center">
									<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
									<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
								</view>
								<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
									<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
										v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
									<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
										<view class="flex-center cart-btn">
											<text class="iconfont icon-ic_increase fs-26"></text>
										</view>
									</view>
									<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
										<view class="flex-center cart-btn">
											<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 横向滑动 -->
			<view class="pt-32 pb-32 pl-24 bg--w111-fff rd-16rpx" v-if="goodStyleConfig == 5">
				<scroll-view scroll-x="true" show-scrollbar="false"
					class="white-nowrap vertical-middle w-full">
					<view class="inline-block mr-20" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
						<easy-loadimage
						:image-src="item.image"
						:borderSrc="item.activity_frame.image"
						width="200rpx"
						height="200rpx"
						:borderRadius="imgStyle"></easy-loadimage>
						<view class="w-200 fs-28 h-80 lh-40rpx line2 break_word mt-20"
							v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
						<view class="flex-between-center mt-8">
							<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
								:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
							<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_increase fs-26"></text>
									</view>
								</view>
								<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
									<view class="flex-center cart-btn">
										<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<productWindow 
			:attr="attr" 
			:isShow='1' 
			:iSplus='1' 
			:iScart='1' 
			:fangda="false"
			type="2"
			@myevent="onMyEvent"
			@ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal"
			@iptCartNum="iptCartNum" @goCat="goCatNum" id='product-window' :is_vip="is_vip"></productWindow>
	</view>
</template>

<script>
	import { getProductslist, getAttr } from '@/api/store.js';
	import skuSelect from '@/mixins/skuSelect.js'
	import { toLogin } from '@/libs/login.js';
	import { mapGetters, mapState } from 'vuex';
	import { getCartCounts } from '@/api/order.js';
	import { goShopDetail } from '@/libs/order.js';
	import productWindow from '@/components/productWindow';
	export default {
		name: 'goodList',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			isSortType: {
				type: String | Number,
				default: 0
			}
		},
		components: {
			productWindow
		},
		mixins: [skuSelect],
		data() {
			return {
				tempArr: [],
				type:0,
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				id: 0,
				productValue: [],
				attrValue: '', //已选属性
				storeName: '', //多属性产品名称
				is_vip: 0, //是否是会员
				storeInfo: {},
				allList: [],       // 全部列表
				leftList: [],      // 左边列表
				rightList: [],     // 右边列表
				mark: 0,           // 列表标记
				boxHeight: [],     // 下标0和1分别为左列和右列高度
				updateNum:10
			};
		},
		watch: {
		    // 监听列表数据变化
		    tempArr:  {
				handler(nVal,oVal){
					// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
					if (!this.tempArr.length ||
					    (this.tempArr.length === this.updateNum && this.tempArr.length <= this.allList.length)) {
					    this.allList = [];
					    this.leftList = [];
					    this.rightList = [];
					    this.boxHeight = [];
					    this.mark = 0;
					}
					// 如果列表有值，调用waterfall方法

					if (this.tempArr.length) {
					    this.allList = this.tempArr;
						this.leftList = [];
						this.rightList = [];
						this.boxHeight = [];
						this.allList.forEach((v, i) => {
							if(this.allList.length < 3 || (this.allList.length <= 7  && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
								if(i % 2){
									this.rightList.push(v);
								}else{
									this.leftList.push(v);
								}
							}
						});
						if(this.allList.length < 3){
							this.mark = this.allList.length+1;
						}else if(this.allList.length <= 7){
							this.mark = this.allList.length - 1;
						}else{
							this.mark = this.allList.length - 2;
						}
						if(this.mark < this.allList.length){
							this.waterFall()
						}
					}
				},
				immediate: true,
				deep:true
		    },
		    // 监听标记，当标记发生变化，则执行下一个item排序
		    mark() {
		        const len = this.allList.length;
		        if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
		            this.waterFall();
		        }
		    },
			dataConfig() {
				this.productslist();
			}
		},
		computed:{
			...mapState({
				cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['isLogin', 'uid', 'cartNum']),
			/*外层盒子样式*/
			boxStyle(){
				let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
				if (this.dataConfig.fillet.type) {
					borderRadius =
						`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
				}
				return {
					borderRadius,
					padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
					marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
					background: this.dataConfig.bottomBgColor.color[0].item,
				}
			},
			styleConfig(){
				return this.dataConfig.styleConfig.tabVal
			},
			wfItemStyle(){
				let windowWidth = uni.getSystemInfoSync().windowWidth;
				return {
					width: (windowWidth - 10 - (this.dataConfig.prConfig.val * 2))/2 + 'px'
				}
			},
			/*商品图片圆角样式*/
			imgStyle(){
				let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
				if (this.dataConfig.styleConfig.tabVal == 1) {
					borderRadius = `${this.dataConfig.filletImg.val * 2}rpx ${this.dataConfig.filletImg.val * 2}rpx 0 0`;
				}
				if (this.dataConfig.filletImg.type) {
					borderRadius =
						`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx`;
						if (this.dataConfig.styleConfig.tabVal == 1) {
							borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx 0 0`;
						}
				}
				return borderRadius
			},
			/*商品名称样式*/
			productStyle(){
				return {
					color: this.dataConfig.goodsNameColor.color[0].item,
					fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
				}
			},
			/* 展示信息 */
			checkboxInfo(){
				return this.dataConfig.checkboxInfo.type
			},
			/* 价格颜色 */
			priceColor(){
				return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item : 'var(--view-theme)'
			},
			/* 原价颜色 */
			otPriceColor(){
				return this.dataConfig.goodsPriceColor.color[0].item
			},
			btnStyle(){
				return this.dataConfig.bntStyleConfig.tabVal
			},
			showBtn(){
				return this.dataConfig.cartConfig.tabVal
			},
			/* 按钮颜色 */
			btnBgColor(){
				return {
					background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.bntBgColor.color[0].item} 0%,${this.dataConfig.bntBgColor.color[1].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
				}
			},
			btnTextColor(){
				return {
					color: '#FFFFFF',
					background: this.dataConfig.toneCartConfig.tabVal ? `linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)` : 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)',
				}
			},
			/*商品数量*/
			numberConfig(){
				return this.dataConfig.numberConfig.val
			},
			/*商品模板*/
			goodStyleConfig(){
				return this.dataConfig.styleConfig.tabVal
			},
			/*检索条件  0综合 1销量 2价格*/
			goodsSort(){
				return this.dataConfig.goodsSort.tabVal
			},
			/*按照什么方式选择商品 0 指定商品 1 指定品牌 2指定分类 3 商品标签 */
			typeConfig(){
				return this.dataConfig.typeConfig.activeValue
			},
			bntConfig(){
				return this.dataConfig.bntConfig.tabVal
			},
			onlyShowPrice(){
				if(this.checkboxInfo.toString()  == '0,2' || this.checkboxInfo.toString()  == '2,0' || this.checkboxInfo.toString()  == '2'){
					return true
				}else{
					return false
				}
			}
		},
		created() {
			// #ifndef APP-PLUS
			// this.$eventHub.$on('product_video_observe', () => {
			// 	this.observeVideo();
			// });
			// #endif
		},
		mounted() {
			this.productslist();
		},
		methods: {
			observeVideo() {
				let observer = uni.createIntersectionObserver(this, { observeAll: true });
				observer.relativeToViewport().observe('.video', res => {
					if (res.intersectionRatio) {
						uni.createVideoContext(res.id, this).play();
					} else{
						uni.createVideoContext(res.id, this).pause();
					}
				});
			},
			productslist() {
				let limit = this.$config.LIMIT;
				let data = {};
				if (this.typeConfig == 1) {
					data = {
						ids: this.dataConfig.goodsList.ids.join(','),
					};
				} else {
					data = {
						priceOrder: this.goodsSort == 2 ? 'desc' : '',
						salesOrder: this.goodsSort == 1 ? 'desc' : '',
						brand_id: this.typeConfig == 2 ? this.dataConfig.brandList.brandVal.join(',') : '',
						store_label_id: this.typeConfig == 4 ? this.dataConfig.goodsLabel.activeValue.join(',') : '',
						cate_id: this.typeConfig == 3 ? this.dataConfig.classList.classVal.join(',') : '',
						page:1,
						limit: this.numberConfig
					};
				}
				getProductslist(data).then(res => {
					this.tempArr = res.data;
				});
			},
			goDetail(item) {
				goShopDetail(item, this.$store.state.app.uid).catch(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					});
				});
			},
			// 商品详情接口；
			getAttrs(id) {
				let that = this;
				getAttr(id, 0).then(res => {
					that.$set(that.attr, 'productAttr', res.data.productAttr);
					that.$set(that, 'productValue', res.data.productValue);
					that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
					that.$set(that, 'storeInfo', res.data.storeInfo);
					that.DefaultSelect();
				})
			},
			addCartChange(item, index){
				if(this.bntConfig == 1){
					if(item.spec_type){
						this.goCartDuo(item);
					}else{
						this.goCartDan(item,index);
					}
				}else{
					this.goDetail(item);
				}

			},
			getCartNum() {
				let that = this;
				getCartCounts().then(res => {
					this.$store.commit('indexData/setCartNum', res.data.count)
				});
			},
			// 瀑布流排序
			waterFall() {
			    const i = this.mark;
			    if (i == 0) {
			        // 初始化，从左边开始插入
			        this.leftList.push(this.allList[i]);
			        // 更新左边列表高度
			        this.getViewHeight(0);
			    } else if (i == 1) {
			        // 第二个item插入，默认为右边插入
			        this.rightList.push(this.allList[i]);
			        // 更新右边列表高度
			        this.getViewHeight(1);
			    } else {
			        // 根据左右列表高度判断下一个item应该插入哪边
			        if(!this.boxHeight.length){
			        	this.rightList.length < this.leftList.length
			        	? this.rightList.push(this.allList[i])
			        	: this.leftList.push(this.allList[i]);
			        } else {
			        	const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
			        	if (leftOrRight) {
			        	    this.rightList.push(this.allList[i])
			        	} else {
			        	    this.leftList.push(this.allList[i])
			        	}
			        }
					// 更新插入列表高度
					this.getViewHeight();
			    }
			},
			// 获取列表高度
			getViewHeight() {
			    // 使用nextTick，确保页面更新结束后，再请求高度
			    this.$nextTick(() => {
			    	setTimeout(()=>{
			    		uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
			    				res ? this.boxHeight[1] = res.height : '';
			    			uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
			    				res ? this.boxHeight[0] = res.height : '';
			    				this.mark = this.mark + 1;
			    			}).exec();
			    		}).exec();
			    	},100)
			    })
			},
		}
	};
</script>

<style lang="scss">
	// $page-padding: 10px;
	// $grid-gap: 10px;
	.wf-page {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    grid-gap: 20rpx;
	}
	.wf-item {
	    // width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
	    padding-bottom: 20rpx;
	}
	.wf-page1 .wf-item{
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 0;
	}
	.item ~ .item{
		margin-top: 32rpx;
	}
	.info_box{
		padding: 16rpx 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		background-color: #fff;
	}
	.bg--w111-484643{
		background: linear-gradient(90deg, #484643 0%, #1F1B17 100%);
	}
	.text--w111-FDDAA4{
		color: #FDDAA4;
	}
	.svip_rd{
		border-radius: 14rpx 0 8rpx 14rpx;
	}
	.cart-btn{
		// background:rgba(255,255,255,0.9);
		width: 100%;
		height: 100%;
	}
</style>
